<!--
 * @Author: 陈迪秀 1170776994@qq.com
 * @Date: 2024-02-23 15:37:47
 * @LastEditors: 陈迪秀 1170776994@qq.com
 * @LastEditTime: 2024-02-26 11:39:28
 * @FilePath: \vite-project\src\components\footer\housekeep-info.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="housekeep-info">
    <div class="housekeep-info__top">
      <!-- <img class="housekeep-info__logo" src="" alt="logo" /> -->
      <hb-svg-icon
        name="logo"
        class="svg-back housekeep-info__logo"
        width="55"
        height="55"
      ></hb-svg-icon>
      <h1 class="housekeep-info__name">{{ housekeepInfo.name }}</h1>
    </div>
    <p class="housekeep-info__text">{{ housekeepInfo.text }}</p>
    <div class="housekeep-info__view">
      <hb-svg-icon
        name="phone"
        class="svg-back"
        width="14"
        height="14"
      ></hb-svg-icon>
      <div class="housekeep-info__view__right">
        <span>{{ `${housekeepInfo?.phone?.phoneName}：` }}</span>
        <span class="is-blue">{{ housekeepInfo?.phone?.phoneValue }}</span>
      </div>
    </div>
    <div class="housekeep-info__view">
      <hb-svg-icon
        name="addess"
        class="svg-back"
        width="14"
        height="14"
      ></hb-svg-icon>
      <p class="housekeep-info__view__right">
        {{
          `${housekeepInfo?.address?.addressName}：${housekeepInfo?.address?.addressValue}`
        }}
      </p>
    </div>
  </div>
</template>
<script setup lang="ts">
import { housekeepInfo } from "./constants";
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.housekeep-info {
  width: 22%;

  .housekeep-info__top {
    display: flex;
    align-items: center;
    align-items: center;
    margin-bottom: 12px;
    .housekeep-info__logo {
      width: 50px;
      height: 50px;
      margin-right: 20px;
    }
    .housekeep-info__name {
      font-size: 32px;
    }
  }
  .housekeep-info__text {
    margin-bottom: 32px;
    font-size: 14px;
  }
  .housekeep-info__view {
    display: flex;
    margin-bottom: 24px;
    font-size: 14px;
    .svg-back {
      margin-right: 14px;
      padding-top: 2px;
    }
    .housekeep-info__view__right {
      width: 250px;
      color: #c4c4c4;
    }
  }
  .is-blue {
    color: #1678ff;
    cursor: pointer;
  }
}
</style>
